<template>
  <div class="container">
    <menuTree :data="menus" />
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item>新增</v-contextmenu-item>
      <v-contextmenu-item>重命名</v-contextmenu-item>
      <v-contextmenu-item>删除</v-contextmenu-item>
    </v-contextmenu>
  </div>
</template>

<script>
import menuTree from '@/components/tree-menu'
export default {
  components: {
    menuTree
  },
  data () {
    return {
      menus: [
        {
          id: 1,
          title: '菜单1',
          isLeaf: false,
          children: [
            {
              id: 2,
              title: '菜单1',
              isLeaf: false,
              children: [
                {
                  id: 3,
                  title: '菜单1',
                  isLeaf: true,
                  children: []
                },
                {
                  id: 4,
                  title: '菜单1',
                  isLeaf: true,
                  children: []
                }
              ]
            },
            {
              id: 5,
              title: '菜单1',
              isLeaf: false,
              children: [
                {
                  id: 6,
                  title: '菜单1',
                  isLeaf: true,
                  children: []
                },
                {
                  id: 7,
                  title: '菜单1',
                  isLeaf: true,
                  children: []
                }
              ]
            }
          ]
        },
        {
          id: 8,
          title: '菜单8',
          isLeaf: false,
          children: [
            {
              id: 9,
              title: '菜单9',
              isLeaf: false,
              children: [
                {
                  id: 30,
                  title: '菜单13',
                  isLeaf: true,
                  children: []
                },
                {
                  id: 40,
                  title: '菜单18',
                  isLeaf: true,
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    onRightClick ({ event, node }) {
      // console.log(event)
      // const x =
      //   event.currentTarget.offsetLeft + event.currentTarget.clientWidth + 10
      // // 因为我放在页面上的box有滚动条，所以需要减掉该盒子的scrollTop
      // const y = event.currentTarget.offsetTop - document.getElementById('left').scrollTop
      console.log(event)
      const postition = {
        top: event.clientY,
        left: event.clientX
      }
      this.$refs.contextmenu.show(postition)
    },
    onSelect (keys, e) {
      console.log(e)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1190px;
  margin: 0 auto;
  display: flex;
  .tree {
    width: 30%;
  }
}
</style>
